import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Navigator,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Alert,
    BackAndroid,
    Platform
} from 'react-native';
import ImageWrapper from './ImageWrapper';
var {width,height} = Dimensions.get('window');
export default class TopNavigator extends Component {

    render(){
        var checkedIndex = this.props.checkedIndex;
        return(
            <View style={styles.navigatorBox}>
                <TouchableOpacity onPress={this.props.leftPress}>
                    <View style={{width:30,height:30}}>
                        <ImageWrapper style={styles.leftStyle} icon={this.props.icon}/>
                    </View>
                </TouchableOpacity>
                <View style={{flex:1,alignItems:'center',justifyContent:'center'}}> 
                    <View style={styles.changeItemBox}>
                        <TouchableOpacity onPress={this.props.messagePress} style={[styles.pressBtn,checkedIndex==1?styles.pressBtnChecked:null]}>
                            <Text style={styles.titleText}>消息</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.props.peoplePress} style={[styles.pressBtn,checkedIndex==2?styles.pressBtnChecked:null]}>
                            <Text style={styles.titleText}>联系人</Text>
                        </TouchableOpacity>
                    </View>
                    
                </View>
                <TouchableOpacity onPress={this.props.chatPress}>
                    <View>
                        <ImageWrapper width={30} height={30} style={{marginRight:10}} icon={'person'}/>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }


     
}



const styles = StyleSheet.create({
    leftStyle:{
        width:30,
        height:30,
        marginLeft:10,
        ...Platform.select({
            ios: {
                borderRadius:15,
            },
            android: {
                borderRadius:30,
            },

        }),
    },
    navigatorBox: {
        width:width,
        height:50,
        justifyContent:'center',
        alignItems:'center',
        flexDirection:'row',
        backgroundColor:'rgb(79,145,237)'
    },
    changeItemBox:{
        justifyContent:'center',
        alignItems:'center',
        flexDirection:'row',
        width:160,
        borderWidth:1,
        borderColor:'#fff',
        borderRadius:5,
        height:30
    },
    pressBtn:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        height:28,
        borderRadius:5
    },
    pressBtnChecked:{
        backgroundColor:'#16568F'
    },
    titleText:{
        color:'#fff'
    },

})